<template>
  <div class='map-legends' :style="{ right: right, bottom: bottom }">
    <div class="legends-title">{{ legendData.title }}</div>
    <div class="legends-list">
      <div class="list-item" v-for="item in legendData.data"><img :src="item.url" alt="">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    right: {
      type: String,
      default: "10px"
    },
    bottom: {
      type: String,
      default: "10px"
    },
    legendData: {
      type: Object,
      require: true,
      default() {
        return {
          title: "风险点",
          data: [{
            name: "风险点",
            url: "图片地址"
          }]
        }
      }
    }
  },
  data() {
    return {

    };
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {
    renderLegends() {

    }
  },
  components: {},
}
</script>

<style lang='less' scoped>
// 大屏图例 start
.map-legends {
  position: absolute;

  .legends-title {
    min-width: 114px;
    height: 24px;
    background: radial-gradient(0% 49% at 75% 75%, rgba(23, 24, 25, 0.08) 29%, rgba(59, 164, 255, 0.35) 100%), rgba(63, 165, 255, 0.1);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid rgba(63, 165, 255, 0.3);
    text-align: center;
    color: white;
    position: relative;

    &::after,
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 7px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 7px;
    }

    &::before {
      border-color: transparent transparent transparent #3BA4FF;
      left: -5px;
    }

    &::after {
      border-color: transparent #3BA4FF transparent transparent;
      right: -5px;
    }
  }

  .legends-list {
    background: rgba(2, 9, 15, .8);
    padding: 5px 0;
    max-height: 300px;
    overflow: auto;

    .list-item {
      display: flex;
      padding: 3px 10px;

      img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
      }
    }
  }
}

// 大屏图例 over</style>